<template>
  <div class="cont">
    <el-form :inline="true" ref="ruleForm" :model="formData" class="demo-form-inline">
      <el-form-item label="购货单位" prop="company">
        <el-input v-model="formData.company" placeholder="请输入购货单位"></el-input>
      </el-form-item>
      <el-form-item label="日期" prop="date">
        <el-date-picker v-model="formData.date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="是否结清" prop="isSettle">
        <el-select v-model="formData.isSettle" placeholder="请选择是否结清">
          <el-option :label="item.label" :value="item.val" v-for="item in optionsList" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="addForm">新增</el-button>
        <el-button class="check-order" @click="checkAllOrder">销账</el-button>
      </el-form-item>
      <el-form-item label="合计" prop="company">
        <view>{{ totalBalanceMoney }}</view>
        <el-input class="totalBalanceMoney" readonly v-model="totalBalanceMoney" placeholder="请输入购货单位"></el-input>
      </el-form-item>
    </el-form>
    <!-- <view class="balance-money">
      <view class="label">合计</view>
      <view class="val">{{ totalBalanceMoney }}</view>
    </view> -->
    <el-table :header-cell-style="{ background: '#f2f5fc', color: '#555555' }" border v-loading="isLoading"
      :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="company" label="单位" width="180">
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="totalMoney" label="应收金额">
      </el-table-column>
      <el-table-column prop="receiveMoney" label="已收金额" width="180">
      </el-table-column>
      <el-table-column prop="balanceMoney" label="合计" width="180">
      </el-table-column>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editForm(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="delForm(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination v-loading="isLoading" @current-change="handleCurrentChange" :current-page.sync="pageNum"
        layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
    name: "Order",
    data() {
        return {
          pageSize: 10,
          pageNum: localStorage.getItem('pageNum') || 1,
          total: 0,
          formData: {
            company: '',
            date: [],
            isSettle: ''
          },
          isLoading: false,
          tableData: [],
          optionsList: [
            {
              val: null,
              label: '全部'
            },
            {
              val: true,
              label: '已结清'
            },
            {
              val: false,
              label: '未结清'
            }
          ],
          totalBalanceMoney: 0,
          selectedIds: []
        };
    },
    mounted() {
      this.pageNum = localStorage.getItem('pageNum') || 1
      this.formData.company = localStorage.getItem('company') || ''
      this.getData()
    },
    methods: {
      async getData() {
        this.isLoading = true
        // 请求参数
        const params = {
          company: this.formData.company,
          startDate: this.formData.date[0],
          endDate: this.formData.date[1],
          isSettle: this.formData.isSettle,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        }
        console.log('请求参数', params)
        // 发出请求
        this.$axios.post(this.$httpUrl + "/order/page", params).then(res => res.data).then((res) => {
          console.log(res);
          this.totalBalanceMoney = res.totalBalanceMoney
          if (res.code == 200) {
            this.tableData = res.data.records;
            this.total = res.data.total
          } else {
            alert("获取数据失败");
          }
        });
        this.isLoading = false
      },
      handleCurrentChange(val) {
        localStorage.setItem('pageNum', val)
        this.pageNum = val
        this.getData()
      },
      onSearch() {
        // 重置页数
        localStorage.setItem('company', this.formData.company)
        this.pageNum = 1
        this.getData()
        console.log('submit!');
      },
      resetForm() {
        // 重置页数
        this.pageNum = 1
        this.$refs['ruleForm'].resetFields();
        this.getData()
      },
      addForm() {
         this.$router.push({ path: '/OrderForm', query: {id: '' }})
      },
      editForm(row) {
        console.log('edit', row)
        this.$router.push({ path: '/OrderForm', query: {id: row.id }})
      },
      delForm(row) {
        console.log('edit', row)
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.delete(this.$httpUrl + `/order/${row.id}`).then(res => res.data).then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.getData()
            } else {
              alert("获取数据失败");
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      checkAllOrder() {
        if (this.selectedIds.length) {
          this.$prompt('请输入备注', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(async ({ value }) => {
            const parmas = {
              remark: value,
              orderIds: this.selectedIds
            }
            this.$axios.post(this.$httpUrl + `/order/writeOff`, parmas).then(res => res.data).then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.getData()
              } else {
                alert("获取数据失败");
              }
            });
          })
        } else {
          alert("请选择数据");
        }
      },
      handleSelectionChange(arr) {
        this.selectedIds = arr.map(e => e.id)
      }
    }
};
</script>

<style scoped>
.cont {
  margin: 20px;
}

.check-order {
  font-size: 18px;
  padding: 11px 16px;
}

/* 利用穿透，设置input边框隐藏 */
.totalBalanceMoney>>>.el-input__inner {
  border: 0;
  background: none;
}
.balance-money {
  display: flex;
}
.balance-money .label {
  font-size: 500;
  font-size: 14px;
}
.balance-money .val {
  font-size: 500;
  font-size: 14px;
}
.pagination {
  margin: 30px auto;
  width: 600px;
  text-align: center;
}
</style>

